<template>
  <div class="personal-info">
    <ContentField>
      <template v-slot:header> 个人信息 </template>
      <template v-slot:body>
        <el-form ref="form" :model="curUserInfo" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="curUserInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="curUserInfo.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="curUserInfo.idNum"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="subPersonalInfo"
              >提交信息</el-button
            >
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-form ref="form" :model="curUserInfo" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="curUserInfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="旧密码">
            <el-input
              placeholder="请输入旧密码"
              v-model="curUserInfo.oldPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              placeholder="请输入新密码"
              v-model="curUserInfo.newPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              placeholder="请输入确认密码"
              v-model="curUserInfo.confirmedNewPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
          </el-form-item>
        </el-form>
      </template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "../../components/ContentField.vue";
export default {
  name: "PersonalInfoView",
  components: {
    ContentField,
  },
  created() {},
  methods: {
    onSubmit() {
      console.log(this.curUserInfo);
      let outer = this;
      this.$store.dispatch("updatePassword", {
        user: this.curUserInfo,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.$message({
              type: "success",
              message: "修改密码成功，请重新登录",
            });
            outer.$store.commit("logOut");
            outer.$router.push("/user/login");
          } else {
            outer.$message.error("修改密码失败：" + resp.data.message);
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    subPersonalInfo() {
      let outer = this;
      this.$store.dispatch("updatePersonalInfo", {
        userInfo: this.curUserInfo,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.data.code == 200) {
            outer.$message({
              type: "success",
              message: "修改个人信息成功",
            });
          } else {
            outer.$message({
              type: "error",
              message: "修改个人信息失败",
            });
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
  },
  data() {
    return {
      curUserInfo: {
        newPassword: "",
        oldPassword: "",
        confirmedNewPassword: "",
        username: this.$store.state.user.username,
        name: this.$store.state.user.name,
        phoneNumber: this.$store.state.user.phoneNumber,
        idNum: this.$store.state.user.idNum,
        id: this.$store.state.user.userInfoId,
      },
    };
  },
};
</script>

<style scoped></style>
